// import { useEffect, useMemo, useState } from "react";
// import eventBus from "../eventBus";
// import { AntdTableData } from "../sku-admin/sku-admin-table";
// import { FormValues } from "../sku-admin";
// import { Tag } from "antd";

// function SkuFront() {
//   const [formValues, setFormValues] = useState<FormValues["options"]>([]);
//   const [dataSource, setDataSource] = useState<AntdTableData[]>([]);
//   const handleButtonClicked = (message: {
//     formValues: FormValues["options"];
//     dataSource: AntdTableData[];
//   }) => {
//     const { formValues: values, dataSource } = message;
//     setFormValues(values);
//     setDataSource(dataSource);
//   };

//   useEffect(() => {
//     eventBus.on("createFrontEndPage", handleButtonClicked);
//     return () => {
//       eventBus.off("createFrontEndPage", handleButtonClicked);
//     };
//   }, []);

//   const [selectedTags, setSelectedTags] = useState<string[]>([]);

//   const price = useMemo(() => {
//     return formValues.length === selectedTags.length ? dataSource.filter(item => {
//       return selectedTags.every(tag => {
//         const [name, value] = tag.split('-');
//         return item[name.toLowerCase() as keyof AntdTableData] === value;
//       });
//     }).reduce((acc, curr) => acc + +curr.price, 0) : 0
//   }, [dataSource, selectedTags])

//   const inventory = useMemo(() => {
//     return formValues.length === selectedTags.length ? dataSource.filter(item => {
//       return selectedTags.every(tag => {
//         const [name, value] = tag.split('-');
//         return item[name.toLowerCase() as keyof AntdTableData] === value;
//       });
//     }).reduce((acc, curr) => acc + +curr.inventory, 0) : 0
//   }, [dataSource, selectedTags])

//   return (
//     <div style={{padding: '20px'}}>
//       <h1>SKU Front</h1>
//       {formValues.map((item) => (
//         <div key={item.name}>
//           <p>{item.name}</p>
//           {item.tags.map((tag, i) => {
//             const tagId = `${item.name}-${tag}`;
//             // Check if the current tag combination is in stock.
//             const hasInventory = dataSource.some(item => {
//               // If the current tag has been selected, allow it to be selected again.
//               if (selectedTags.includes(tagId)) {
//                 return true;
//               }
//               // get current tags name
//               const [currentTagName] = tagId.split('-');
//               // Handling the selection of sibling tags
//               if (selectedTags.some(t => t.startsWith(currentTagName))) {
//                 const currentTags = [
//                   ...selectedTags.filter(t => !t.startsWith(currentTagName)),
//                   tagId
//                 ];
//                 // Check if the peer label combination is in stock
//                 return currentTags.every(tag => {
//                   const [name, value] = tag.split('-');
//                   return item[name.toLowerCase() as keyof AntdTableData] === value;
//                 }) && +item.inventory > 0;
//               }
//               // Handle different level label selection
//               const currentTags = [
//                 ...selectedTags.filter(t => !t.startsWith(item.name)),
//                 tagId
//               ];
//               // The number of labels cannot exceed the specified number
//               if (currentTags.length > formValues.length) {
//                 return false;
//               }
//               // Check whether the label combination is in stock
//               return currentTags.every(tag => {
//                 const [name, value] = tag.split('-');
//                 return item[name.toLowerCase() as keyof AntdTableData] === value;
//               }) && +item.inventory > 0;
//             });

//             return (
//               <Tag
//                 color={selectedTags.some(t => t.startsWith(item.name) && t.endsWith(tag)) ? "red" : "default"}
//                 key={i}
//                 onClick={() => {
//                   if(!hasInventory) return; // If no inventory is available, it cannot be selected
//                   if (selectedTags.includes(tagId)) {
//                     setSelectedTags(prev => prev.filter(t => t !== tagId));
//                   } else {
//                     setSelectedTags(prev => [
//                       ...prev.filter(t => !t.startsWith(item.name)),
//                       tagId
//                     ]);
//                   }
//                 }}
//                 style={{ 
//                   fontSize: '16px', 
//                   cursor: hasInventory ? 'pointer' : 'not-allowed',
//                   padding: '5px 10px',
//                   opacity: hasInventory ? 1 : 0.5
//                 }}
//               >
//                 {tag}
//               </Tag>
//             );
//           })}
//         </div>
//       ))}
//       <div style={{ color: '#333', fontSize: '18px', fontWeight: 'bold', marginTop: '20px' }}>
//         price: {price}
//       </div>
//       <div style={{ color: '#666', fontSize: '16px', marginTop: '10px' }}>
//         inventory: {inventory}
//       </div>
//     </div>
//   );
// }

// export default SkuFront;
